<template>
	<a-card :bordered="false" :body-style="{ 'padding-bottom': '0px' }" class="mb-2">
		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
			<a-row :gutter="24">
				<a-col :span="4">
					<a-form-item label="柜子" name="cabId">
						<a-select
							v-model:value="searchFormState.cabId"
							:options="cabinetOptions"
							placeholder="请选择柜子"
							allow-clear
							@change="onChangeCab"
						></a-select>
					</a-form-item>
				</a-col>
				<a-col :span="4">
					<a-form-item label="柜门" name="cabDoorId">
						<a-select
							v-model:value="searchFormState.cabDoorId"
							:options="cabinetDoorOptions"
							placeholder="柜门"
							allow-clear
						></a-select>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="对象名称" name="objName">
						<a-input v-model:value.trim="searchFormState.objName" placeholder="请输入对象名称"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="事件标题" name="eventTitle">
						<a-input v-model:value.trim="searchFormState.eventTitle" placeholder="请输入事件标题"></a-input>
					</a-form-item>
				</a-col>

				<a-col :span="8">
					<a-form-item label="干系人" name="eventTitle">
						<a-input v-model:value.trim="searchFormState.eventUserName" placeholder="请输入干系人"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="事件类别" name="eventCateg">
						<a-select v-model:value="searchFormState.eventCateg" placeholder="请选择事件类别" allowClear>
							<a-select-option value="1">操作事件</a-select-option>
							<a-select-option value="2">预警事件</a-select-option>
							<a-select-option value="3">提醒事件</a-select-option>
							<a-select-option value="4">环境事件</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="是否异常" name="abnFlag">
						<a-select v-model:value="searchFormState.abnFlag" placeholder="请选择" allowClear>
							<a-select-option value="0">否</a-select-option>
							<a-select-option value="1">是</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>

				<a-col :span="4">
					<a-form-item label="处理状态" name="procStatus">
						<a-select v-model:value="searchFormState.procStatus" placeholder="请选择" allowClear>
							<a-select-option value="0">未处理</a-select-option>
							<a-select-option value="2">已处理</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="4">
					<a-form-item label="物品ID" name="goodsId">
						<a-input v-model:value.trim="searchFormState.goodsId" placeholder="请输入物品ID"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="4">
					<a-form-item label="台账ID" name="goodsLedgerId">
						<a-input v-model:value.trim="searchFormState.goodsLedgerId" placeholder="台账ID"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-button type="primary" @click="table.refresh(true)">查询</a-button>
					<a-button style="margin: 0 8px" @click="() => resetForm()">重置</a-button>
				</a-col>
			</a-row>
		</a-form>
	</a-card>
	<a-card :bordered="false">
		<s-table
			ref="table"
			:columns="columns"
			:data="loadData"
			:alert="options.alert.show"
			bordered
			:row-key="(record) => record.id"
			:tool-config="toolConfig"
			:row-selection="options.rowSelection"
		>
			<template #operator class="table-operator">
				<a-space>
					<a-button type="primary" @click="openExcHandleRefBatch()">
						批量处理
					</a-button>
				</a-space>
			</template>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'objId'">
					{{record.goodsId?record.goodsCode?record.goodsCode:'未知':record.cabCode}}
				</template>
				<template v-if="column.dataIndex === 'objName'">
					{{record.goodsId?record.goodsName?record.goodsName:'未知':record.cabName}}
				</template>
				<template v-if="column.dataIndex === 'eventAction'">
					<a-tag color="cyan" v-if="record.eventAction===1">门禁刷卡</a-tag>
					<a-tag color="cyan" v-if="record.eventAction===2">开柜门</a-tag>
					<a-tag color="cyan" v-if="record.eventAction===3">关柜门</a-tag>
					<a-tag color="cyan" v-if="record.eventAction===4">手动盘库</a-tag>
					<a-tag color="cyan" v-if="record.eventAction===5">自动盘库</a-tag>
					<a-tag color="cyan" v-if="record.eventAction===6">柜子离线重启</a-tag>
					<a-tag color="cyan" v-if="record.eventAction===7">提交借用检查</a-tag>
					<a-tag color="cyan" v-if="record.eventAction===8">提交归还检查</a-tag>
					<a-tag color="cyan" v-if="record.eventAction===9">定期检查</a-tag>
					<a-tag color="cyan" v-if="record.eventAction===11">扫码入库</a-tag>
					<a-tag color="cyan" v-if="record.eventAction===12">H5借出</a-tag>
					<a-tag color="cyan" v-if="record.eventAction===13">H5归还</a-tag>
				</template>
				<template v-if="column.dataIndex === 'eventCateg'">
					<a-tag color="blue" v-if="record.eventCateg===1">操作事件</a-tag>
					<a-tag color="red" v-if="record.eventCateg===2">预警事件</a-tag>
					<a-tag color="orange" v-if="record.eventCateg===3">提醒事件</a-tag>
					<a-tag color="green" v-if="record.eventCateg===4">环境事件</a-tag>
					<a-tag color="pink" v-if="record.eventCateg===5">报警事件</a-tag>
				</template>
				<template v-if="column.dataIndex === 'abnFlag'">
					<a-tag color="green" v-if="record.abnFlag===0">否</a-tag>
					<a-tag color="red" v-if="record.abnFlag===1">是</a-tag>
				</template>
				<template v-if="column.dataIndex === 'notifyFlag'">
					<a-tag color="green" v-if="record.notifyFlag===0">否</a-tag>
					<a-tag color="red" v-if="record.notifyFlag===1">是</a-tag>
				</template>
				<template v-if="column.dataIndex === 'procStatus'">
					<template v-if="record.abnFlag===1">
						<a-tag color="red" v-if="record.procStatus===0">未处理</a-tag>
						<a-tag color="blue" v-if="record.procStatus===1">处理中</a-tag>
						<a-tag color="orange" v-if="record.procStatus===2">已处理</a-tag>
					</template>
					<template v-else>
						<span></span>
					</template>
				</template>
				<template v-if="column.dataIndex === 'action'">
					<template v-if="record.abnFlag===1">
						<a-button type="link" size="small" v-if="record.procStatus===0 || record.procStatus===1"
								  @click="excHandleRef.onOpen(record.id)">处理
						</a-button>
						<a-button type="link" size="small" v-if="record.procStatus===2"
								  @click="excHandleRef.onOpen(record.id)">查看
						</a-button>
					</template>
					<template v-if="record.eventAction===4 || record.eventAction===5">
						<a-button type="link" size="small" @click="exportInvGoods(record.apiLogId)"
								  :loading="exportLoading">盘库报告
						</a-button>
					</template>
					<template v-if="record.eventId">
						<a-button type="link" size="small"
								  @click="eventVideoRef.onOpen(record.eventId)">查看回放
						</a-button>
					</template>
				</template>
				<template v-if="column.dataIndex === 'eventUserName'">
					<span v-if="record.eventUserName">{{record.eventUserName}}({{record.eventUserAccount}})</span>
				</template>
				<template v-if="column.dataIndex === 'cabDoorName'">
					{{record.cabName}}-{{record.cabDoorName}}
				</template>
			</template>
		</s-table>
	</a-card>
	<ExcHandle ref="excHandleRef" @successful="table.refresh(true)"/>
	<ExcHandleBatch ref="excHandleRefBatch" @successful="table.refresh(true)"/>
	<EventVideo ref="eventVideoRef"/>
</template>

<script setup name="bizEvent">
	import { useRoute, useRouter } from 'vue-router'
	import bizEventApi from "@/api/biz/bizEventApi";
	import bizCabinetInfoApi from "@/api/biz/bizCabinetInfoApi";
	import bizCabinetDoorApi from "@/api/biz/bizCabinetDoorApi";
	import ExcHandle from "./excHandle.vue"
	import ExcHandleBatch from "./excHandleBatch.vue"
	import { message } from 'ant-design-vue'
	import EventVideo from "./video.vue"

	const dateFormat = 'YYYY-MM-DD';
	let searchFormState = reactive({})
	const excHandleRef = ref()
	const excHandleRefBatch = ref()
	const eventVideoRef = ref()
	const searchFormRef = ref()
	const table = ref()
	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
	const router = useRouter()
	//存放柜子
	const cabinetOptions = ref([])
	//存放柜门
	const cabinetDoorOptions = ref([])
	//导出loading
	const exportLoading = ref(false)

	const columns = [
		{
			title: '发生时间',
			dataIndex: 'eventTime',
		},
		{
			title: '对象编号',
			dataIndex: 'objId',
		},
		{
			title: '对象名称',
			dataIndex: 'objName',
		},
		{
			title: '柜子编号',
			dataIndex: 'cabCode',
		},
		{
			title: '柜门名称',
			dataIndex: 'cabDoorName',
		},
		{
			title: '动作',
			dataIndex: 'eventAction',
		},
		{
			title: '事件类别',
			dataIndex: 'eventCateg',
		},
		{
			title: '事件等级',
			dataIndex: 'eventLevel',
		},
		{
			title: '是否异常',
			dataIndex: 'abnFlag',
		},
		{
			title: '事件标题',
			dataIndex: 'eventTitle',
		},
		{
			title: '事件描述',
			dataIndex: 'eventDesc',
		},
		{
			title: '是否通知',
			dataIndex: 'notifyFlag',
		},
		{
			title: '干系人',
			dataIndex: 'eventUserName',
		},
		{
			title: '处理状态',
			dataIndex: 'procStatus',
		},
		{
			title: '操作',
			dataIndex: 'action',
		}
	]

	let selectedRowKeys = ref([])
	// 列表选择配置
	const options = {
		alert: {
			show: false,
			clear: () => {
				selectedRowKeys = ref([])
			}
		},
		rowSelection: {
			onChange: (selectedRowKey, selectedRows) => {
				selectedRowKeys.value = selectedRowKey
			},
			getCheckboxProps: (record) => ({
				disabled: record.abnFlag === 0 || (record.abnFlag === 1 && record.procStatus === 2)
			})
		}
	}
	const loadData = (parameter) => {
		return bizEventApi.bizGoodsEventPage(Object.assign(parameter, searchFormState)).then((data) => {
			return data
		})
	}

	bizCabinetInfoApi.bizCabinetList({}).then((res) => {
		cabinetOptions.value = res.map((item) => {
			return {
				label: `${item.cabinetName}`,
				value: item.id
			}
		})
	})

	bizCabinetDoorApi.bizCabinetDoorList({}).then((res) => {
		cabinetDoorOptions.value = res.map((item) => {
			return {
				label: `${item.cabinetDoorName}`,
				value: item.id
			}
		})
	})

	//存放柜子切换
	const onChangeCab = (value) => {
		searchFormState.cabDoorId = undefined
		cabinetDoorOptions.value = []
		bizCabinetDoorApi.bizCabinetDoorList({ cabinetInfoId: value }).then((res) => {
			cabinetDoorOptions.value = res.map((item) => {
				return {
					label: `${item.cabinetDoorName}`,
					value: item.id
				}
			})
		})
	}

	const openExcHandleRefBatch = () => {
		if (selectedRowKeys.value.length < 1) {
			message.warning('请选择一条或多条数据')
			return false
		}
		const params = selectedRowKeys.value.map((m) => {
			return m
		})
		excHandleRefBatch.value.onOpen(params)
	}

	const exportInvGoods = (id) => {
		exportLoading.value = true
		bizEventApi.bizEventInvGoodsExport({
			apiLogId: id
		}).then((res) => {
			const blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8' });
			const contentDisposition = res.headers['content-disposition']
			const patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
			const $link = document.createElement("a");
			$link.href = URL.createObjectURL(blob);
			var reg = /^["](.*)["]$/g
			$link.download = decodeURI(patt.exec(contentDisposition)[1].replace(reg, '$1'))
			$link.click();
			document.body.appendChild($link);
			document.body.removeChild($link); // 下载完成移除元素
			window.URL.revokeObjectURL($link.href); // 释放掉blob对象
		}).finally(() => {
			exportLoading.value = false
		})
	}

	watch(
		() => router.currentRoute.value,
		(newValue, oldValue) => {
			if (newValue.name === 'bizEvent') {
				let params = newValue.params
				console.log('params=', params)
				if (params) {
					searchFormState.goodsId = null
					searchFormState.cabDoorId = null
					searchFormState.cabId = null
					searchFormState.abnFlag = null
					searchFormState.procStatus = null
					searchFormState.goodsLedgerId = null
					// 接收路由参数
					if (params.goodsId) {
						searchFormState.goodsId = params.goodsId
					}
					if (params.cabDoorId) {
						searchFormState.cabDoorId = params.cabDoorId
					}
					if (params.cabId) {
						searchFormState.cabId = params.cabId
					}
					if (params.goodsLedgerId) {
						searchFormState.goodsLedgerId = params.goodsLedgerId
					}
					if (params.abnFlag) {
						searchFormState.abnFlag = params.abnFlag
					}
					if (params.procStatus) {
						searchFormState.procStatus = params.procStatus
					}
					// 加载数据
					if (table.value) {
						table.value.refresh(true)
					}
				}
			}
		},
		{
			immediate: true
		}
	)

	const resetForm = () => {
		searchFormRef.value.resetFields()
		searchFormState.goodsId = null
		searchFormState.cabDoorId = null
		searchFormState.cabId = null
		searchFormState.abnFlag = null
		searchFormState.procStatus = null
		searchFormState.goodsLedgerId = null
		table.value.refresh(true)
	}

</script>
